<template>
    <div>
        <!--查询表单-->
        <el-form :inline="true" :model="formData" class="demo-form-inline">
            <el-form-item label="编号">
                <el-input v-model="formData.id" placeholder="请输入类目id" clearable />
            </el-form-item>
            <el-form-item label="商品名称">
                <el-input v-model="formData.name" placeholder="请输入类目名称" clearable />
            </el-form-item>
            <el-form-item label="商品副标题">
                <el-input v-model="formData.subName" placeholder="请输入类目名称" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <!--数据列表-->
        <el-table :data="categoryData" style="width: 100%">
            <el-table-column fixed prop="id" label="编号" width="100" />
            <el-table-column prop="name" label="类目名称" width="120" />
            <el-table-column prop="subName" label="类目名称" width="120" />
            <el-table-column prop="img" label="类目图片" width="120">
                <template #default="scope">
                    <img :src="scope.row.img" width="50" height="50">
                </template>
            </el-table-column>
            <el-table-column prop="price" label="商品价格" width="100" />
            <el-table-column prop="seq" label="类目排序" width="90" />
            <el-table-column prop="status" label="类目状态" width="100" />
            <el-table-column prop="categoryId" label="父目录ID" width="100" />
            <el-table-column prop="statusX" label="父目录ID" width="100" />
            <el-table-column fixed="right" label="操作" min-width="150">
                <template #default="scope">
                    <el-button type="danger" size="small" v-if="scope.row.status != 1" @click="offclick(scope.row,'上线',1)">
                        上线
                    </el-button>
                    <el-button type="danger" size="small" v-if="scope.row.status != 5" @click="offclick(scope.row,'下线',5)">
                        下线
                    </el-button>
                    <el-button type="danger" size="small" v-if="scope.row.status != 10" @click="offclick(scope.row,'禁售',10)">
                        禁售
                    </el-button>
                    <el-button type="warning" size="small" @click='handleClick(scope.row)'>编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination :page-size="pageData.pageSize" background layout="total, prev, pager, next"
            :total="pageData.total" @current-change="currentChange" />

    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
//导入api接口
import {productApi} from '@/api'
const categoryData = ref([])
const formData = reactive({
    id: 0,
    name: '',
    ids : [],
    subName:''
})
//定义分页数据
const pageData = reactive({
    total: 20, //总条数
    pageSize:4, // 每页显示条数
    pageNum:1 //当前页面
})
// import axios from 'axios'
//挂载 渲染  页面第一次加载时立即执行
onMounted(() => {
    CallproductApi()
  
})

//构建一个函数
const CallproductApi = () => { 
    let id = formData.id == 0 ? undefined : formData.id;
    let name = formData.name == '' ? undefined : formData.name;

    productApi.select.cell({
        id: id, name:name,
        pageNum: pageData.pageNum,
        pageSize: pageData.pageSize
    }).then((res: any) => {
        console.log(res);
        categoryData.value = res.items
        pageData.total = res.total; // 总条数赋值
        
    }).catch((err:any)=>{
        console.log(err);
        
    })
}

const onSubmit = () => {
    console.log('submit!')
    // 回显数据
    CallproductApi()
}
//下线的函数
const offclick = (row:any,optionname:string,status:any) => {
    console.log(row.id);
    ElMessageBox.confirm(
        '您确定要对 ' + row.name +' 进行'+optionname+'操作吗？',
        '警告⚠',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            productApi.delete.cell({ id: row.id,status:status }).then((res: any) => {
             ElMessage({
                type: 'success',
                message: '删除成功'
             })
             console.log(res)
            //对数据刷新
                CallproductApi()
        })   
           
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '恭喜取消成功！',
            })
        })
    
}

//1、导入router对象只是为了跳转页面 route 是在路由跳转的时候传递参数
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()



//编辑按钮事件处理函数
const handleClick = (row: any) => {
    //2、跳转页面 并传递参数
    router.push({path:'/product/edit',query:{id:row.id,name:row.name}})
    console.log('编辑')
}
//分页 页面设计
const currentChange = (val: number) => {
    console.log(`current page: ${val}`)
    pageData.pageNum = val; // 当前页数赋值
    //对数据刷新
    
    CallproductApi()
}
</script>

<style scoped>

</style>